import { _ as _object_spread } from "@swc/helpers/_/_object_spread";
import { _ as _object_spread_props } from "@swc/helpers/_/_object_spread_props";
import { _ as _sliced_to_array } from "@swc/helpers/_/_sliced_to_array";
import React, { useEffect, useImperativeHandle, useMemo, useRef, useState } from "react";
import { render as reactRender, unmount as reactUnmount } from "rc-util/lib/React/render";
import classes from "./imagePreview.module.less";
import { isNumber } from "ahooks/lib/utils";
import { useLatest, useMount, useSetState, useUnmount, useUpdateEffect } from "ahooks";
import { createPortal } from "react-dom";
import { throttle } from "lodash";
import { jsx as _jsx } from "react/jsx-runtime";
import { jsxs as _jsxs } from "react/jsx-runtime";
var getDistance = function(touchList) {
    return Math.sqrt(Math.pow(touchList[0].clientX - touchList[1].clientX, 2) + Math.pow(touchList[0].clientY - touchList[1].clientY, 2));
};
function ImagePreview(props) {
    var tmp = props.zoomRate, propsZoomRate = tmp === void 0 ? 1.2 : tmp;
    var _useState = _sliced_to_array(useState(false), 2), loading = _useState[0], setLoading = _useState[1];
    var _useState1 = _sliced_to_array(useState(0), 2), activeIndex = _useState1[0], setActiveIndex = _useState1[1];
    var _useSetState = _sliced_to_array(useSetState({
        scale: 1,
        deg: 0,
        offsetX: 0,
        offsetY: 0,
        enableTransition: false
    }), 2), transform = _useSetState[0], setTransform = _useSetState[1];
    var lastTransform = useLatest(transform);
    var imgRefs = useRef([]);
    var wrapper = useRef(null);
    var temp = useRef({
        startScale: 1,
        startDistance: 0
    });
    var currentImg = useMemo(function() {
        return props.imgList[activeIndex];
    }, [
        activeIndex,
        props.imgList.join(",")
    ]);
    var imgStyle = useMemo(function() {
        var scale = transform.scale, deg = transform.deg, offsetX = transform.offsetX, offsetY = transform.offsetY, enableTransition = transform.enableTransition;
        var translateX = offsetX / scale;
        var translateY = offsetY / scale;
        switch(deg % 360){
            case 90:
            case -270:
                var ref;
                ref = [
                    translateY,
                    -translateX
                ], translateX = ref[0], translateY = ref[1], ref;
                break;
            case 180:
            case -180:
                var ref1;
                ref1 = [
                    -translateX,
                    -translateY
                ], translateX = ref1[0], translateY = ref1[1], ref1;
                break;
            case 270:
            case -90:
                var ref2;
                ref2 = [
                    -translateY,
                    translateX
                ], translateX = ref2[0], translateY = ref2[1], ref2;
                break;
        }
        var style = {
            transform: "scale(".concat(scale, ") rotate(").concat(deg, "deg) translate(").concat(translateX, "px,").concat(translateY, "px)"),
            transition: enableTransition ? "transform .3s" : ""
        };
        style.maxWidth = style.maxHeight = "100%";
        return style;
    }, [
        transform
    ]);
    var reset = function() {
        setTransform({
            scale: 1,
            deg: 0,
            offsetX: 0,
            offsetY: 0,
            enableTransition: false
        });
    };
    var prev = function() {
        setActiveItem(activeIndex - 1);
    };
    var next = function() {
        setActiveItem(activeIndex + 1);
    };
    var handleAction = function(action) {
        var options = arguments.length > 1 && arguments[1] !== void 0 ? arguments[1] : {};
        if (loading) return;
        var _$_object_spread = _object_spread({
            zoomRate: propsZoomRate,
            // rotateDeg: 90,
            enableTransition: true
        }, options), _object_spread_zoomRate = _$_object_spread.zoomRate, zoomRate = _object_spread_zoomRate === void 0 ? 1.2 : _object_spread_zoomRate, enableTransition = _$_object_spread.enableTransition;
        switch(action){
            case "zoomOut":
                if (lastTransform.current.scale > 0.2) {
                    setTransform({
                        scale: Number.parseFloat((lastTransform.current.scale / zoomRate).toFixed(3)),
                        enableTransition: enableTransition
                    });
                }
                break;
            case "zoomIn":
                if (lastTransform.current.scale < 7) {
                    setTransform({
                        scale: Number.parseFloat((lastTransform.current.scale * zoomRate).toFixed(3)),
                        enableTransition: enableTransition
                    });
                }
                break;
        }
    };
    var ZIndex = useMemo(function() {
        return isNumber(props.zIndex) ? props.zIndex : 1400;
    }, [
        props.zIndex
    ]);
    var handleLoad = function() {
        setLoading(false);
    };
    var handleMouseDown = function(e) {
        if (loading || e.button !== 0 || !wrapper.current) return;
        setTransform({
            enableTransition: false
        });
        var offsetX = transform.offsetX, offsetY = transform.offsetY;
        var startX = e.pageX;
        var startY = e.pageY;
        var dragHandler = throttle(function(ev) {
            setTransform(_object_spread_props(_object_spread({}, transform), {
                offsetX: offsetX + ev.pageX - startX,
                offsetY: offsetY + ev.pageY - startY
            }));
        });
        document.addEventListener("mousemove", dragHandler);
        document.addEventListener("mouseup", function() {
            document.removeEventListener("mousemove", dragHandler);
        });
        e.preventDefault();
    };
    var handleTouchStart = function(event) {
        temp.current = {
            startScale: transform.scale,
            startDistance: getDistance(event.touches)
        };
    };
    var handleTouchMove = function(event) {
        var touches = event.touches;
        if (touches.length === 2 && temp.current.startDistance) {
            event.preventDefault();
            var distance = getDistance(touches);
            handleAction(distance / temp.current.startDistance > 1 ? "zoomIn" : "zoomOut", {
                zoomRate: propsZoomRate,
                enableTransition: false
            });
        }
    };
    var mousewheelHandler = throttle(function(e) {
        var delta = e.deltaY || e.deltaX;
        handleAction(delta < 0 ? "zoomIn" : "zoomOut", {
            zoomRate: propsZoomRate,
            enableTransition: false
        });
    });
    var setActiveItem = function(index) {
        var len = props.imgList.length;
        setActiveIndex((index + len) % len);
    };
    useEffect(function() {
        requestAnimationFrame(function() {
            var $img = imgRefs.current[0];
            if (!$img.complete) {
                setLoading(true);
            }
        });
    }, [
        currentImg
    ]);
    useUpdateEffect(function() {
        var _props_onSwitch;
        reset();
        (_props_onSwitch = props.onSwitch) === null || _props_onSwitch === void 0 ? void 0 : _props_onSwitch.call(props, activeIndex);
    }, [
        activeIndex
    ]);
    useMount(function() {
        var _wrapper_current;
        (_wrapper_current = wrapper.current) === null || _wrapper_current === void 0 ? void 0 : _wrapper_current.focus();
        document.addEventListener("wheel", mousewheelHandler);
    });
    useUnmount(function() {
        document.removeEventListener("wheel", mousewheelHandler);
    });
    useImperativeHandle(props.ref, function() {
        return {
            setActiveItem: setActiveItem
        };
    });
    var _props_container;
    // useEventListener('mousewheel', document, mousewheelHandler);
    return /*#__PURE__*/ createPortal(/*#__PURE__*/ _jsxs("div", {
        className: classes.wrapper,
        style: {
            zIndex: ZIndex
        },
        onClick: props.onClose,
        children: [
            /*#__PURE__*/ _jsx("div", {
                className: classes.mask
            }),
            /*#__PURE__*/ _jsx("div", {
                className: classes.canvas,
                onTouchStart: handleTouchStart,
                onTouchMove: handleTouchMove,
                children: props.imgList.map(function(url, i) {
                    return /*#__PURE__*/ _jsx("img", {
                        ref: function(html) {
                            imgRefs.current[i] = html;
                        },
                        src: url,
                        style: _object_spread_props(_object_spread({}, imgStyle), {
                            display: i === activeIndex ? "block" : "none"
                        }),
                        onLoad: handleLoad,
                        onError: handleLoad,
                        onMouseDown: handleMouseDown
                    }, url);
                })
            })
        ]
    }), (_props_container = props.container) !== null && _props_container !== void 0 ? _props_container : document.body);
}
ImagePreview.common = function(props) {
    var container = document.createDocumentFragment();
    var destroy = function() {
        reactUnmount(container);
    };
    var currentConfig = _object_spread_props(_object_spread({}, props), {
        onClose: destroy
    });
    var render = function(renderProps) {
        setTimeout(function() {
            reactRender(/*#__PURE__*/ _jsx(ImagePreview, _object_spread_props(_object_spread({}, renderProps), {
                onClose: destroy
            })), container);
        });
    };
    var update = function(updateProps) {
        render(_object_spread({}, currentConfig, updateProps));
    };
    render(currentConfig);
    return {
        destroy: destroy,
        update: update
    };
};
ImagePreview.show = function(props) {
    return ImagePreview.common(props);
};
export default ImagePreview;

 //# sourceMappingURL=index.js.map